<template>
  <div style="margin-bottom: 20px;">
    <a-input-search placeholder="请输入角色名称搜索" style="width: 320px">
      <template #enterButton>
        <a-button>
          <SearchOutlined type="search"/>
        </a-button>
      </template>
    </a-input-search>
    <a-button type="primary" @click="roleFormRef.open('新增角色')">新增</a-button>
  </div>
  <!--  <a-row :gutter="16">-->
  <!--    <a-col :span="state.selectedRowKeys.length ? 12 : 24">-->

  <!--          :row-selection="rowSelection"-->
  <!--          :custom-row="customRow"-->
  <a-table
      :loading="loading" :columns="columns"
      :data-source="data"
      :pagination="pagination" @change="handleChange" row-key="id">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <a-space v-if="!record.isSuperAdmin">
          <!--          <a href="javascript:void(0)" @click="roleFormRef.open('编辑角色', record)">-->
          <!--            <edit-outlined style="margin-right: 5px;"/>-->
          <!--            编辑-->
          <!--          </a>-->
          <!--          <a-divider type="vertical"/>-->
          <a href="javascript:void(0)" @click="rolePermissionModuleRef.open('权限配置', record.id)">
            <setting-outlined style="margin-right: 5px;"/>
            权限配置
          </a>
          <!--          <a-divider type="vertical"/>-->
          <!--          <a-popconfirm-->
          <!--              key="remove"-->
          <!--              title="确定删除吗?"-->
          <!--              ok-text="是"-->
          <!--              cancel-text="否"-->
          <!--              @confirm="handleRemove(record)"-->
          <!--          >-->
          <!--            <a href="javascript:void(0)" style="color:red;">-->
          <!--              <delete-outlined style="margin-right: 5px;"/>-->
          <!--              删除-->
          <!--            </a>-->
          <!--          </a-popconfirm>-->
        </a-space>
      </template>
    </template>
  </a-table>
  <!--    </a-col>-->
  <!--    <a-col v-if="state.selectedRowKeys.length" :span="12">-->
  <!--      <a-card-->
  <!--          style="width: 100%"-->
  <!--          :tab-list="[-->
  <!--              {key: 'user',tab: '用户'},-->
  <!--              // {key: 'permission',tab: '权限'}-->
  <!--              ]"-->
  <!--          :active-tab-key="tabKey"-->
  <!--          @tabChange="key => tabKey = key"-->
  <!--      >-->
  <!--        <p v-if="tabKey === 'user'">-->
  <!--          <role-user-module :role-id="state.selectedRowKeys[0]"/>-->
  <!--        </p>-->
  <!--        <p v-else-if="tabKey === 'permission'">app content</p>-->
  <!--      </a-card>-->
  <!--    </a-col>-->
  <!--  </a-row>-->
  <role-form ref="roleFormRef" @ok="loadData"/>
  <role-permission-module ref="rolePermissionModuleRef" @ok="loadData"/>
</template>

<script lang="ts" setup>

import { reactive, ref } from 'vue'
import { SearchOutlined, SettingOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { Pagination } from '@/config/common'

import { getRoles, removeRole } from '@/api/sys-role'
import RoleForm from '@/page/system/role/modules/RoleForm.vue'
import { useStore } from '@/store/store'
import RolePermissionModule from '@/page/system/role/modules/RolePermissionModule.vue'

const roleFormRef = ref<InstanceType<typeof RoleForm>>()
const rolePermissionModuleRef = ref<InstanceType<typeof RolePermissionModule>>()
const columns = [
  {
    title: '角色编码',
    dataIndex: 'roleCode'
  },
  {
    title: '角色名称',
    dataIndex: 'roleName'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '300px'
  }
]

const data = ref<any[]>([])

const loading = ref(false)

const pagination = reactive<Pagination>({
  current: 1,
  pageSize: 10,
  total: 0
})

const loadData = () => {
  loading.value = true
  const {
    current,
    pageSize: size
  } = pagination
  getRoles({
    current,
    size
  }, {}).then(res => {
    data.value = res.records
    pagination.total = res.total
  }).finally(() => {
    loading.value = false
  })
}

const handleRemove = (record: any) => {
  removeRole(record.id).then(() => {
    message.info('删除成功')
    loadData()
  })
}

const handleChange = (page: Pagination) => {
  pagination.current = page.current
  pagination.pageSize = page.pageSize
  loadData()
}

const store = useStore()
store.dispatch('LoadDictData', ['sex'])
loadData()

</script>
